<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">工作台</span><br><br>
    <div>
      <a-row>
        <a-col :span="1">
          <a-image style="height: 50px;width: 50px;margin-top: 3px;border-radius: 50%" :preview="false" :src="userAvatar"></a-image>
        </a-col>
        <a-col :span="20">
          <div style="margin-left: 15px">
            <span style="margin-top: 20px;font-size: 20px">{{ nowTime }}，{{userName}}</span>
            <h4 style="font-size: 15px;color: rgba(0,0,0,.45)">角色 | [ 管理员 ]</h4>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>

  <div class="workContent">
    <a-card class="workCard" >
      <a-row type="flex" justify="center" style='weight:100%;text-align: center'>
        <a-col :span='5' style='font-size: medium'>
          志愿者人数
          <h3><count-to :start-val="0" :end-val="volNum" :duration="2000" class="card-panel-num" /></h3>
        </a-col>
        <a-col :span='1' ><a-divider type='vertical' style='height: 64px' /></a-col>

        <a-col :span='5' style='font-size: medium'>
          志愿团队个数
          <h3><count-to :start-val="0" :end-val="teamNum" :duration="2000" class="card-panel-num" /></h3>
        </a-col>

        <a-col :span='1'><a-divider type='vertical' style='height: 64px' /></a-col>

        <a-col :span='5' style='font-size: medium'>
          志愿活动个数
          <h3><count-to :start-val="0" :end-val="activityNum" :duration="2000" class="card-panel-num" /></h3>
        </a-col>
        <a-col :span='1'><a-divider type='vertical' style='height: 64px' /></a-col>
        <a-col :span='5' style='font-size: medium'>
          社区通知个数
          <h3><count-to :start-val="0" :end-val="newsNum" :duration="2000" class="card-panel-num" /></h3>
        </a-col>


      </a-row>
    </a-card>

    <a-row>
      <a-col :span="16">
        <div style="margin-right: 20px">
          <a-card class="workCard" style='height: 300px;display: none' title="热门团队排行">
            <div id="c1"></div>
          </a-card>

          <a-card class="workCard" style='height: 400px' title="版本更新日志">
            <a-timeline>
              <a-timeline-item>2023-05-06，对平台系统优化</a-timeline-item>
              <a-timeline-item>2023-04-25，平台3.0.0版本发布，平台上线</a-timeline-item>
              <a-timeline-item>2023-04-12，进行版本更新，发布移动端志愿者服务平台2.0.0版本</a-timeline-item>
              <a-timeline-item>2023-03-27，发布移动端志愿者服务平台1.0.0版本</a-timeline-item>
              <a-timeline-item>2023-03-19，增加登陆验证功能</a-timeline-item>
              <a-timeline-item>2023-03-02，对相关模块进行优化，发布2.0.0版本</a-timeline-item>
              <a-timeline-item>2023-02-13，发布志愿者管理服务平台1.0.0版本</a-timeline-item>
            </a-timeline>
          </a-card>
        </div>
      </a-col>

      <a-col :span="8">
        <a-card class="workCard" title="快速开始/便捷导航">
          <a-row justify="space-between">
            <a-col :span="5"><div style="text-align: center"><a @click="toFar('/account/mySetting')">个人设置</a></div></a-col>
            <a-col :span="5"><div style="text-align: center"><a @click="toFar('/account/newsList')">新闻列表</a></div></a-col>
            <a-col :span="5"><div style="text-align: center"><a @click="toFar('/account/activityList')">活动列表</a></div></a-col>
            <a-col :span="5"><div style="text-align: center"><a @click="toFar('/account/teamList')">团队列表</a></div></a-col>
          </a-row><div style="height: 10px;"></div>

        </a-card>

        <a-card class="workCard" style="display: none" title="扇形图">
          <div id="c2"></div>
        </a-card>
      </a-col>
    </a-row>
    <div style="height: 25px;"></div>
  </div>

</template>

<script>
import {onMounted, reactive, toRefs, watch} from "vue";
import {useStore} from "vuex";
import countTo from "../../../vue-countTo/vue-countTo";
import { Chart, Util } from "@antv/g2";
import router from "@/router";
import {getUserList} from "@/utils/user";
import {getTeam} from "@/utils/team";
import {getActivityList} from "@/utils/activity";
import {getNew} from "@/utils/new";

export default {
  components: {
    countTo
  },

  setup(){
    const state = reactive({
      userName: '',
      nowTime: '',
      userAvatar: '',
      volNum: 0,
      teamNum: 0,
      activityNum: 0,
      newsNum:0,
    })

    const store = useStore()
    state.userName = store.state.userName
    state.userAvatar = store.state.userAvatar

    watch(store, (val)=>{
      state.userAvatar = store.state.userAvatar
      console.log(val,'头像')
    })

    const toFar = function (path){
      router.push(path)
    }

    let timeNow = new Date();
    // 获取当前小时
    let hours = timeNow.getHours();
    // 判断当前时间段
    if (hours >= 0 && hours <= 10) {
      state.nowTime = `早上好`;
    } else if (hours > 10 && hours <= 14) {
      state.nowTime = `中午好`;
    } else if (hours > 14 && hours <= 18) {
      state.nowTime = `下午好`;
    } else if (hours > 18 && hours <= 24) {
      state.nowTime = `晚上好`;
    }
    getUserList('','',1).then(res => {
      if (res.status == 200){
        state.volNum = res.data.data.records.length
      }
    })
    getTeam({ teamName: '', current: 1,pageSize: 100,}).then(res => {
      if (res.status == 200){
        state.teamNum = res.data.data.records.length
      }
    })
    getActivityList(1,1000,'','','','').then(res => {
      if (res.status == 200){
        state.activityNum = res.data.data.records.length
      }
    })
    getNew({author: '', content: '',title: '', type: '', current: 1, pageSize: 100}).then(res => {
      if (res.status == 200){
        state.newsNum = res.data.data.records.length
      }
    })

    onMounted(() => {

    })

    return{
      ...toRefs(state),
      toFar,
    }
  }
}
</script>

<style scoped>
.workCard{
  margin-top: 25px;
}
.workContent{
  width: 96%;margin: 0 auto
}
</style>

<style>
.workContent .ant-card-head-title{
  font-weight: 600;
}
</style>